<template>
    <div class="cont">
        <div class="main">
            <div class="tit">{{ biaoti }}</div>
            <div style="height: 50px">
                <el-select v-model="value" v-show="lbhShow" filterable placeholder="请选择梁编号" @change="reChange">
                    <el-option v-for="(item, index) in options" :key="index" :label="item.girder_name" :value="item.girder_name">
                    </el-option>
                </el-select>
            </div>
            <div class="main1" v-show="main1show">
                <div class="par1" id="schart5">
                    <table border="1" cellspacing="0" rules="rows">
                        <tr>
                            <td>钢束编号</td>
                            <td>伸长率偏差(%)</td>
                            <td>张拉状态</td>
                        </tr>
                        <tr v-for="(item, index) in girderName" :key="index">
                            <td>{{ item.steel_number }}</td>
                            <td>+{{ item.elongation_quantity_deviation }}</td>
                            <td>{{ item.strech_state }}</td>
                        </tr>
                    </table>
                </div>
                <div class="par2">
                    <div class="par22">
                        <div>
                            <div
                                v-for="(item, index) in findList.data"
                                class="t_d_i_b"
                                @click="selectById(item.steel_number + '左')"
                                :class="{ re: index % 2 != 0 }"
                                :key="index"
                            >
                                <div
                                    :class="[
                                        { clicleGreen: item.conclusion == '1' },
                                        { cliclieWhite: item.conclusion == '0' },
                                        { clilceRed: item.conclusion == '2' }
                                    ]"
                                ></div>
                                <span> {{ item.steel_number ? item.steel_number : '' }} </span>
                            </div>
                        </div>
                        <div>
                            <div
                                v-for="(item, index) in findList.data2"
                                class="t_d_i_b"
                                @click="selectById(item.steel_number + '右')"
                                :key="index"
                                :class="{ re: index % 2 != 1 }"
                            >
                                <div
                                    :class="[
                                        { clicleGreen: item.conclusion == '1' },
                                        { cliclieWhite: item.conclusion == '0' },
                                        { clilceRed: item.conclusion == '2' }
                                    ]"
                                ></div>
                                <span> {{ item.steel_number ? item.steel_number : '' }} </span>
                            </div>
                        </div>
                        <!-- 底部 -->
                        <div>
                            <div
                                class="wai t_d_i_b"
                                v-for="(item, index) in findList.data3"
                                @click="selectById(item.steel_number, index)"
                                :key="index"
                            >
                                <div
                                    :class="[
                                        { clicleGreen: item.conclusion == '1' },
                                        { cliclieWhite: item.conclusion == '0' },
                                        { clilceRed: item.conclusion == '2' }
                                    ]"
                                ></div>
                                <p>{{ item.steel_number ? item.steel_number : '' }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="tips">
                        状态：0未操作（白） 1合格（绿） 2超标（红）<br />
                        定位对应孔道时显示该孔疲乏的数据
                    </div>
                </div>
                <div class="bottom_table">
                    <table border="1" cellspacing="0">
                        <tr>
                            <td>钢束编号</td>
                            <td>张拉时间</td>
                            <td>张拉力1(kn)</td>
                            <td>张拉力2(kn)</td>
                            <td>设计张拉力(kn)</td>
                            <td>理论伸长量(mm)</td>
                            <td>实际伸长量(mm)</td>
                            <td>伸长值偏差</td>
                            <td>结论</td>
                        </tr>
                        <tr>
                            <td>{{ IShowData[0] ? IShowData[0].steel_number : '无数据' }}</td>
                            <td>{{ IShowData[0] ? IShowData[0].strech_time : '无数据' }}</td>
                            <td>{{ IShowData[0] ? IShowData[0].strech_force_one : '无数据' }}</td>
                            <td>{{ IShowData[0] ? IShowData[0].strech_force_two : '无数据' }}</td>
                            <td>{{ IShowData[0] ? IShowData[0].design_strech_force : '无数据' }}</td>
                            <td>{{ IShowData[0] ? IShowData[0].theory_elongation_quantity : '无数据' }}</td>
                            <td>{{ IShowData[0] ? IShowData[0].practical_elongation_quantity : '无数据' }}</td>
                            <td>{{ IShowData[0] ? IShowData[0].elongation_quantity_deviation : '无数据' }}</td>
                            <td v-if="IShowData[0] ? IShowData[0].conclusion == '1' : '合格'">合格</td>
                            <td v-else-if="IShowData[0] ? IShowData[0].conclusion == '0' : '合格'">未操作</td>
                            <td v-else-if="IShowData[0] ? IShowData[0].conclusion == '2' : '合格'">超标</td>
                            <td v-else>无数据</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts';
import Pagination from '@/components/Pagination'; // Secondary package based on el-pagination
import $ from 'jquery';
import waves from '@/directive/waves';
import ajax from '@/utils/myajax';
export default {
    components: { Pagination },
    directives: { waves },
    data() {
        return {
            lbhShow: false,
            count: 1,
            biaoti: '梁场自动化',
            main1show: false,
            main2show: false,
            main3show: false,
            main4show: true,
            id: '',
            blockShow: false,
            dataList: '',
            dataTime: '',
            girderName: '',
            nameNumber: '',
            findList: '',
            IShowData: '',
            // 根据孔道编号
            IShowDataKong: '',
            options: [],
            value: '',
            girderNameznyj: '',
            findListznyj: ''
        };
    },
    created() {
        this.selectGriderName('MQ31.5QW-001');
        this.selectGriderNameZnyj('MQ31.5QW-001');
        this.selectFind('MQ31.5QW-001');
        this.selectFindZnyj('MQ31.5QW-001');

        // 获取下拉菜单
        this.getSelect();
    },
    mounted() {
        this.getData();
        setTimeout(() => {
            for (const key in this.dataList) {
                console.log(key);
                this.selectData(1, this.dataList[key].id);
            }
        }, 1000);

        var me = this;
        ajax('AiMonitoring/CountAi', {}, function (data) {
            me.dataA1 = data;
        });
    },
    methods: {
        reChange(e) {
            console.log(e);
            this.selectGriderName(e);
            this.selectGriderNameZnyj(e);
            this.nameNumber = e;
        },
        onStop() {
            this.decoder.stop();
        },
        showVideo(url) {
            this.token = localStorage.getItem('vidiotoken');
            this.decoder = new EZUIKit.EZUIPlayer({
                id: 'playWind',
                autoplay: true,
                url: url,
                accessToken: this.token,
                decoderPath: '/static/ezui',
                width: 1275,
                height: 731
            });
            this.blockShow = true;
            this.onStop();
        },
        clo() {
            this.blockShow = false;
            this.onStop();
        },

        // 获取梁编号、、 下拉框 Girder/FindGirderBySelect
        getSelect() {
            ajax('Girder/FindGirderBySelect', { section_id: localStorage.getItem('section_id') }, (data) => {
                console.log('获取梁编号、、 下拉框 Girder/FindGirderBySelect', data);
                this.options = data;
            });
        },

        // 查询数据
        selectById(steel_number, index) {
            let section_id = localStorage.getItem('section_id');
            console.log(index);
            switch (index) {
                case 0:
                case 1:
                case 2:
                case 3:
                case 4:
                    steel_number = steel_number + '左';
                    break;
                case 6:
                case 7:
                case 8:
                case 9:
                case 10:
                    steel_number = steel_number + '右';
                    break;
            }
            console.log(steel_number);
            setTimeout(() => {
                ajax(
                    'StretchDraw/FindStretchDrawBySteelNumber',
                    { girder_name: this.nameNumber, section_id: section_id, steel_number: steel_number },
                    (data) => {
                        console.log('得到数据', data);
                        this.IShowData = data;
                    }
                );
            }, 100);
        },

        // 根据孔道编号查询数据 /MudJacking/FindMudJackingByDuctNumber
        getNumberSelect(duct_number, index) {
            let section_id = localStorage.getItem('section_id');
            console.log(index);
            switch (index) {
                case 0:
                case 1:
                case 2:
                case 3:
                case 4:
                    duct_number = duct_number + '左';
                    break;
                case 6:
                case 7:
                case 8:
                case 9:
                case 10:
                    duct_number = duct_number + '右';
                    break;
            }
            console.log(duct_number);
            setTimeout(() => {
                ajax(
                    'MudJacking/FindMudJackingByDuctNumber',
                    { girder_name: this.nameNumber, section_id: section_id, duct_number: duct_number },
                    (data) => {
                        console.log('根据孔道编号得到数据', data);
                        this.IShowDataKong = data;
                    }
                );
            }, 100);
        },

        // 查询 左边的
        selectGriderName(girder_name) {
            let section_id = localStorage.getItem('section_id');
            ajax('StretchDraw/FindStretchDrawByGirderName', { girder_name: girder_name, section_id: section_id }, (data) => {
                console.log('根据梁编号', data);
                this.girderName = data;
            });
        },
        // /MudJacking/FindMudJackingByGirderName
        selectGriderNameZnyj(girder_name) {
            let section_id = localStorage.getItem('section_id');
            ajax('MudJacking/FindMudJackingByGirderName', { girder_name: girder_name, section_id: section_id }, (data) => {
                console.log('智能压浆，根据梁编号', data);
                this.girderNameznyj = data;
            });
        },

        // /MudJacking/FindMudJackingByDp  // 查询智能压浆的右边
        selectFindZnyj(girder_name) {
            let section_id = localStorage.getItem('section_id');
            ajax('MudJacking/FindMudJackingByDp', { girder_name: girder_name, section_id: section_id }, (data) => {
                console.log('查询右边的智能压浆的', data);

                var result = [];
                for (var i = 0; i < 11; i++) {
                    result.push(data.data3[i]);
                }

                console.log(result);

                data.data3 = result;

                for (const key in data.data) {
                    if (data.data[key] != null) {
                        data.data[key].duct_number = data.data[key].duct_number.substr(0, data.data[key].duct_number.length - 1);
                    }
                }

                for (const key in data.data3) {
                    if (key != 5) {
                        if (data.data3[key] != null) {
                            data.data3[key].duct_number = data.data3[key].duct_number.substr(0, data.data3[key].duct_number.length - 1);
                        }
                    }
                }
                for (const key in data.data2) {
                    if (data.data2[key] != null) {
                        data.data2[key].duct_number = data.data2[key].duct_number.substr(0, data.data2[key].duct_number.length - 1);
                    }
                }

                this.findListznyj = data;
            });
        },

        // 查询右边的 /StretchDraw/FindStretchDrawByDp 查询状态
        selectFind(girder_name) {
            let section_id = localStorage.getItem('section_id');
            ajax('StretchDraw/FindStretchDrawByDp', { girder_name: girder_name, section_id: section_id }, (data) => {
                console.log('查询右边的', data);

                var result = [];
                for (var i = 0; i < 11; i++) {
                    result.push(data.data3[i]);
                }

                console.log(result);

                data.data3 = result;

                for (const key in data.data) {
                    if (data.data[key] != null) {
                        data.data[key].steel_number = data.data[key].steel_number.substr(0, data.data[key].steel_number.length - 1);
                    }
                }

                for (const key in data.data3) {
                    if (key != 5) {
                        if (data.data3[key] != null) {
                            data.data3[key].steel_number = data.data3[key].steel_number.substr(0, data.data3[key].steel_number.length - 1);
                        }
                    }
                }
                for (const key in data.data2) {
                    if (data.data2[key] != null) {
                        data.data2[key].steel_number = data.data2[key].steel_number.substr(0, data.data2[key].steel_number.length - 1);
                    }
                }

                this.findList = data;
            });
        },

        selectData(index, id) {
            console.log('index', index);
            console.log('id', id);
            let path = '';
            switch (index) {
                case 1:
                    path = 'Girder/FindGirderGj';
                    break;
                case 2:
                    path = 'Girder/FindGirderHnt';
                    break;
                case 3:
                    path = 'Girder/FindGirderMb';
                    break;
                case 4:
                    path = 'Girder/FindGirderZl';
                    break;
                case 5:
                    path = 'Girder/FindGirderYj';
                    break;
                case 6:
                    path = 'Girder/FindGirderYh';
                    break;
            }
            ajax(path, { id: id }, (data) => {
                console.log(id);
                console.log('搜索', data);
                this.dataTime = data;
                this.dataList[id - 1].start_time = this.dataTime[0].start_time;
                this.dataList[id - 1].end_time = this.dataTime[0].end_time;
                this.dataList[id - 1].person = this.dataTime[0].person;
                this.$forceUpdate();
            });
        },

        // 格式化
        getData() {
            let section_id = localStorage.getItem('section_id');
            ajax('Girder/FindGirderAll', { section_id: section_id }, (data) => {
                console.log('拿到', data);
                this.dataList = data;
            });
        }
    }
};
</script>

<style scoped>
.noHighlighting {
    background-color: #016f01;
}
.highlighting {
    background-color: #01f0ff;
}
.biaoge {
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 30px;
    font-family: Source Han Sans CN, Source Han Sans CN-Normal;
    font-weight: Normal;
    text-align: center;
}
.name {
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 30px;
    font-family: Source Han Sans CN, Source Han Sans CN-Normal;
    font-weight: Normal;
    text-align: center;
    color: #ff6600;
}
.name1 {
    width: 20%;
}

.name2 {
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.name2 div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 26px;
    opacity: 1;
    width: 30px;
    height: 28px;
    opacity: 1;
    border-radius: 2px;
    margin-left: 10px;
}
.name2 div img {
    cursor: pointer;
}
.name3 {
    width: 20%;
}
.name4 {
    width: 20%;
}
.name5 {
    width: 15%;
}

#schart- {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 722px;
    height: 300px;
}
#schart- img {
    width: 200px;
    height: 200px;
}
#schart6- {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 593px;
    height: 300px;
}
#schart6- img {
    width: 200px;
    height: 200px;
}
.tit6 {
    margin-top: 10px;
    line-height: 45px;
    font-size: 22px;
    text-indent: 2em;
    color: #a4e9ff;
    width: 846px;
    height: 45px;
    opacity: 1;
    /* background: #142b6c;
border: 2px solid #2263f0; */
}
.tit5 {
    line-height: 45px;
    font-size: 22px;
    text-indent: 2em;
    color: #89e5ff;
    width: 846px;
    height: 45px;
    opacity: 1;
    background: #142b6c;
    border: 2px solid #2263f0;
}
.no12 {
    margin-left: 70px;
    float: left;
    width: 593px;
    height: 480px;
    background: url(../../assets/img/bei2.png) no-repeat;
    background-size: 100% 100%;
}
.no11 {
    position: relative;
    float: left;
    width: 849px;
    height: 478px;
    border: 2px solid #142957;
}
.no2 {
    display: flex;
    justify-content: space-around;
    margin-top: 30px;

    height: 250px;
}
.no1 {
    width: 100%;
    height: 476px;
    border: 1px solid #038bff;
    border-radius: 10px;
    /* background: chartreuse; */
}
.main4 {
    width: 1768px;
    height: 736px;
}
.top22 {
    width: 191px;
    height: 90px;
    line-height: 55px;
    opacity: 1;
    font-size: 30px;
    font-family: Source Han Sans CN, Source Han Sans CN-Normal;
    font-weight: Normal;
    text-align: center;
    color: #ffffff;
}
.top21 {
    width: 191px;
    height: 158px;
    background: url(../../assets/img/wenz.png) no-repeat;
    background-size: 100% 100%;
}
.top20 {
    width: 191px;
    height: 220px;
    /* background: tomato; */
}
.top2 {
    display: flex;
    justify-content: space-around;
    margin-top: 50px;
    width: 100%;
    height: 250px;
    /* background: rgb(128, 139, 117); */
}
.hah2 {
    width: 121px;
    height: 38px;
    width: 77px;
    line-height: 40px;
    text-align: center;
    color: white;
    opacity: 1;
    background: #001965;
    border: 1px solid #00f0ff;
}
.hah1 {
    width: 121px;
    height: 40px;
    line-height: 40px;
    opacity: 1;
    font-size: 24px;
    font-family: Source Han Sans CN, Source Han Sans CN-Normal;
    font-weight: Normal;
    text-align: left;
    color: #ffffff;
}
.hah {
    display: flex;
    justify-content: space-around;
    width: 470px;
    height: 40px;
    /* background: tomato; */
    margin-top: 30px;
}
.tit2 {
    position: absolute;
    top: 10px;
    right: 50px;
    width: 110px;
    height: 23px;
    opacity: 1;
    font-size: 24px;
    font-family: Source Han Sans CN, Source Han Sans CN-Normal;
    font-weight: Normal;
    text-align: left;
    color: #ffffff;
}
.ccon2 {
    padding-top: 50px;
    position: relative;
    float: left;
    margin-left: 36px;
    width: 472px;
    height: 369px;
    border: 1px solid #00f0ff;
    border-radius: 11px;
}
.ccon00 {
    width: 100px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    color: white;
}
.c00 {
    justify-content: space-around;
    display: flex;
    height: 46px;
    width: 100%;
    border-bottom: 1px solid #00fff0;
}
.ccon01 {
    width: 80px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    color: white;
}
.c01 {
    justify-content: space-around;
    display: flex;
    height: 46px;
    width: 646px;
    border-bottom: 1px solid #00fff0;
}

.ccon1 {
    float: left;
    margin-left: 15px;
    width: 648px;
    height: 419px;
    border: 1px solid #00fff0;
    border-radius: 11px;
}
.ccon {
    float: left;
    width: 593px;
    height: 419px;
    border: 1px solid #00fff0;
    border-radius: 11px;
}
.tit1 {
    position: absolute;
    top: -35px;
    left: 290px;
    width: 100px;
    height: 23px;
    opacity: 1;
    font-size: 24px;
    font-weight: Normal;
    text-align: left;
    color: #ffffff;
}
.top1 {
    margin-top: 20px;
    position: relative;
    width: 1770px;
    height: 419px;
}

.main3 {
    width: 1770px;
    height: 736px;
}
.pa22 {
    position: absolute;
    left: 100px;
    top: 20px;
    width: 90px;
    height: 20px;
    opacity: 1;
    font-size: 20px;
    font-weight: Normal;
    text-align: left;
    color: #ffffff;
}
#schart2- {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1768px;
    height: 500px;
}
#schart2- img {
    width: 300px;
    height: 300px;
}
.pa11 {
    width: 180px;
    height: 59px;
    line-height: 59px;
    font-size: 24px;
    text-align: center;
    color: #fff;
}
.pa0 {
    display: flex;
    justify-content: space-around;
    width: 1767px;
    height: 59px;
    border: 1px solid #02fef5;
}
.pa1 {
    width: 1768px;
    height: 270px;
    border: 1px solid #02fef5;
}
.pa2 {
    position: relative;
    margin-top: 15px;
    width: 1768px;
    height: 460px;
    background: url(../../assets/img/bei2.png) no-repeat;
    background-size: 100% 100%;
}
.main2 {
    width: 1524px;
    height: 736px;
}
.par31 {
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #00f0ff;
    width: 100%;
    height: 53px;
}
.par312 {
    width: 302px;
    height: 53px;
    opacity: 1;
    line-height: 53px;
    font-size: 24px;
    font-family: Source Han Sans CN, Source Han Sans CN-Normal;
    font-weight: Normal;
    text-align: center;
    color: #ffffff;
}
.par311 {
    width: 300px;
    height: 53px;
    opacity: 1;
    line-height: 53px;
    font-size: 24px;
    font-family: Source Han Sans CN, Source Han Sans CN-Normal;
    font-weight: Normal;
    text-align: left;
    color: #ffffff;
}
.par4 {
    margin-top: 100px;
    float: left;
    width: 722px;
    height: 216px;
    opacity: 0.7;
    margin-left: 120px;
    border: 1px solid #00f6ff;
    border-radius: 11px;
}
.par3 {
    margin-top: 100px;
    float: left;
    width: 850px;
    height: 186px;
    opacity: 0.7;
    border: 1px solid #00f6ff;
    border-radius: 11px;
}
.par2 {
    margin-left: 15px;
    margin-bottom: 70px;
    float: left;
    width: 1111px;
    height: 464px;
}
.par22 {
    background: url(../../assets/img/znzl.png) no-repeat;
    background-size: 100% 100%;
    width: 1111px;
    height: 460px;
    color: #ffffff;
}
.par22 > div:nth-of-type(1) {
    width: 180px;
    display: inline-block;
    transform: rotate(-15deg);
    position: relative;
    left: 212px;
    top: 55px;
}
.par22 > div:nth-of-type(1) span {
    display: inline-block;
    transform: rotate(15deg);
}

.par22 > div:nth-of-type(2) span {
    display: inline-block;
    transform: rotate(-15deg);
}

.par22 > div:nth-of-type(2) {
    width: 180px;
    position: relative;
    right: 165px;
    top: 75px;
    transform: rotate(15deg);
    display: inline-block;
    float: right;
}
.par22 > div:nth-of-type(3) {
    /* background-color: burlywood; */
    width: 650px;
    height: 78px;
    position: relative;
    top: 156px;
    left: 80px;
    display: inline-block;
}
.wai {
    width: 55px;
    height: 55px;
    display: inline-block;
}
.clicleGreen {
    width: 45px;
    height: 45px;
    display: inline-block;
    margin: 10px 0px;
    background: #17ee36;
    border-radius: 50%;
}
.clilceRed {
    width: 45px;
    height: 45px;
    display: inline-block;
    margin: 10px 0px;
    background: red;
    border-radius: 50%;
}
.cliclieWhite {
    width: 45px;
    height: 45px;
    margin: 10px 0px;
    display: inline-block;
    background: #ffffff;
    border-radius: 50%;
}
#schart5- {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 722px;
    height: 300px;
}

#schart5 {
    height: 464px;
    overflow-x: hidden;
    overflow-y: scroll;
}
#schart5- img {
    width: 300px;
    height: 300px;
}
.nei11 {
    width: 180px;
    height: 53px;
    line-height: 53px;
    opacity: 1;
    font-size: 24px;
    font-family: Source Han Sans CN, Source Han Sans CN-Normal;
    font-weight: Normal;
    text-align: center;
    color: #ffffff;
}
.nei1 {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 53px;
    /* opacity: 0.7; */
    background: #010d2d;
    border: 1px solid #00f6ff;
    border-radius: 11px;
}
.left1 {
    cursor: pointer;
    width: 193px;
    height: 48px;
    /* opacity: 0.5; */
    background: #010c23;
    border: 1px solid #00f6ff;
    border-radius: 16px;
    margin-top: 15px;
}
.left1 img {
    float: left;
    margin-top: 11.5px;
    margin-left: 15px;
}
.left1 div {
    float: left;
    margin-left: 20px;
    width: 125px;
    height: 48px;
    opacity: 1;
    font-size: 24px;
    line-height: 48px;
    font-family: Source Han Sans CN, Source Han Sans CN-Normal;
    font-weight: Normal;
    text-align: left;
    color: #ffffff;
}
.cont {
    width: 100%;
    height: 100%;
}
.left {
    margin-top: 20px;
    margin-left: 48px;
    float: left;
    width: 193px;
    height: 600px;
    /* background: chartreuse; */
}
.main {
    position: relative;
    float: left;
    margin-top: 20px;
    margin-left: 23px;
    width: 1770px;
    height: 790px;
    padding: 20px 40px;
    background: url(../../assets/img/scbj.png) no-repeat;
    background-size: 100% 100%;
}
.par1 {
    float: left;
    width: 640px;
    height: 464px;

    background: #010d2d;
}
.par1 table {
    width: 100%;
}
.par1 table tr {
    width: 100%;
    line-height: 50px;
}

.par1 table td {
    text-align: center;
}
.main1 {
    width: 1770px;
    height: 736px;
}
.re {
    position: relative;
    top: 18px;
}
.tit {
    text-align: center;
    position: absolute;
    width: 1850px;
    height: 20px;
    top: -26px;
    left: 0;
    font-size: 28px;
    color: #00f0ff;
    font-weight: 600;
}

.play {
    position: absolute;
    width: 1275px;
    height: 731px;
    border: 5px solid rgb(0, 252, 255);
    border-radius: 15px;
    z-index: 999;
    left: 310px;
    top: 73px;
}
#container {
    width: 1200px;
    height: 600px;
    position: absolute;
    left: 400px;
}
#playWind {
    width: 100%;
    align-content: center;
    text-align: center;
    border-radius: 5px;
    z-index: 999;
}
.iamged {
    height: 130px;
    width: 165px;
    position: relative;
    top: 15px;
    left: 12px;
}
.title {
    color: #ffffff;
    line-height: 60px;
}
.bottom_table {
    color: #ffffff;
    width: 100%;
    border-radius: 5px;
}

.par1 table {
    border: 1px solid #00f6ff;
    color: #ffffff;
}

.bottom_table table tr td {
    text-align: center;
    width: 195px;
    line-height: 90px;
}
.bottom_table table {
    width: 100%;
    border: 1px solid #00f6ff;
}
.tips {
    text-align: center;
    opacity: 1;
    font-size: 16px;
    font-weight: Normal;
    color: #00ffe4;
}
.t_d_i_b {
    display: inline-block;
}
</style>
<style>
.el-input--small .el-input__inner {
    background-color: #000635 !important;
    border: 1px solid #00f6ff;
    color: #ffffff;
}
</style>